<template>
	<view>
		<u-navbar back-icon-color="#000000" :title="name" :back-icon-size="40" :background="{backgroundColor: '#FFBB1A'}" :title-color="textColor" :border-bottom="false" :title-bold="true">
		</u-navbar>
		<activeInfo :promotionId="id"/>
		<view :class="['shop-cart-container',transformClass?'shop-cart-active':'']" @click="showCartFn">
			<u-icon name="shopping-cart" style="font-size: 60rpx;font-weight: bold;"></u-icon>
		</view>
	</view>
</template>

<script>
	import LazyList from './lazyList.vue'
	import activeInfo from './activeCompont/activeInfo.vue';
	import { useShopStore } from '@/store/shop.js';
	import { useUserStore } from '@/store/user.js';
	import { mapState } from 'pinia';
	export default {
		components: { LazyList ,activeInfo},
		data() {
			return {
				id: null,
				name: '活动',
				loadStatus: 'nomore',
				params: {
					pageIndex: 1,
					PageSize: 10
				},
				flowList: [],
				loading:true,
				transformClass:true,
			}
		},
		onLoad(options) {
			this.id = options.id
			if(options.name){
				this.name = options.name
			}
		},
		computed:{
			...mapState(useShopStore, {storeShop: 'shop'}),
			...mapState(useUserStore, ['isPurchase'])
		},
		methods: {
			async getPromotionDetail() {
				let params = {
					id: this.id
				}
				if (this.storeShop.id) params.shopId = this.storeShop.id
				const res = await this.$http.get('api/SalesPromotion/GetSalesPromotionById', { params });
				console.log(res);
				this.flowList = res.conditionItems
			},
			// 滚动隐藏购物车
			showCartFn(){
				if(!this.transformClass){
					this.goShopCartFn()
				}else{
					this.transformClass = false; //要添加的class类名
				}
				clearTimeout(this.timer);//这里必须要每次滚动前 清除一次
				// 如果停留则表示滚动结束  一旦空了1s就判定为滚动结束
				this.timer = setTimeout(() => {
				  this.transformClass = true //滚动结束清除class类名
				}, 2000);
			},
			goShopCartFn(){
				if(!this.transformClass){
					if (!this.isPurchase) {
						return this.$u.toast('当前账号没有查看购物车的权限，请联系管理员处理~');
					}else{
						uni.navigateTo({
							url: '/pages/sale/homePage/shopCart',
						});
					};
				};
				this.transformClass = false;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.promotion-header{
		width: 100%;
		position: relative;
		height: 300rpx;
		border-bottom: 1px solid black;
		.promotion-header-bg{
			width: 100%;
			height: 120rpx;
			background-color: #FFBB1A;
			border-bottom-left-radius: 14rpx;
			border-bottom-right-radius: 14rpx;
		}
		.promotion-header-info{
			width: 100%;
			box-sizing: border-box;
			padding: 0 36rpx;
			position: absolute;
			top: 40rpx;
			.promotion-header-info-list{
				background-color: #fff;
				box-sizing: border-box;
				padding:34rpx 30rpx;
				border-radius: 16rpx;
				.promotion-header-info-item{
					margin-bottom: 10rpx;
					display: flex;
					.header-info-item-lt{
						width: 140rpx;
						display: inline-block;
						color: #666666;
					}
					.header-info-item-rt{
						flex: 1;
						display: inline-block;
					}
				}
			}
		}
	}
	.loading-container{
		position: relative;
		height: 100%;
		width: 100%;
	}
	.shop-cart-container{
		position: fixed;
		bottom: 200rpx;  
		right: 14rpx; 
		z-index: 887;
		width: 120rpx; 
		height: 120rpx; 
		border-radius: 50%; 
		background-color: #FFBB1A;
		display: flex;
		justify-content: center;
		align-items: center;
		box-shadow: 0px 0px 18px 2px rgba(6,0,1,0.1);
		transition: all 0.5s ease;
	}
	.shop-cart-active{
		right: -60rpx;
		opacity:0.4;
		transition: all 0.5s ease;
	}
</style>
